<template>
  <div style="padding: 20px 0">
    <!--景点列表-->
    <div style="width: 1200px;margin: 0 auto">
      <div class="query-field">
        <el-form
          :inline="true"
          :model="querySpots"
          class="query-form"
        >
          <div class="query-field-left">
            <el-form-item label="景点名称">
              <el-input
                v-model="querySpots.name"
                placeholder="请输入景点名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="城市">
              <el-input
                v-model="querySpots.city"
                placeholder="请输入城市"
                clearable
              />
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="querySpots.location"
                placeholder="请输入地址"
                clearable
              />
            </el-form-item>
          </div>
          <div class="query-field-right">
            <el-form-item>
              <el-button
                type="primary"
                @click="handleQuery"
              >查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="(spots,spotsId) in spots"
          :key="spotsId"
        >
          <el-card
            class="spot-card"
            shadow="never"
          >
            <div
              class="spot-image"
              :style="{backgroundImage: `url(${spots.image})`}"
            />
            <div style="padding: 15px">
              <h3 style="margin: 0 0 10px;font-size: 18px;font-weight: 500">
                {{spots.name}}</h3>
              <div class="location">
                <i
                  style="margin-right: 5px"
                  class="el-icon-location"
                ></i>
                <span>{{spots.location}}</span>
              </div>
              <p class="brief">{{spots.description}}</p>
              <div class="tags">
                <el-tag
                  size="mini"
                  v-for="(tags,i) in spots.spotsTagsList"
                  :key="i"
                >{{tags.tag}}</el-tag>
              </div>
              <el-button
                style="width: 100%"
                type="primary"
                @click="viewDetail(spots.spotsId)"
              >查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  景点详情弹窗-->
    <vxe-modal
      v-model="detailVisible"
      :title="currentSpot.name"
      width="70%"
      show-footer
      esc-closable
      show-zoom
      resize
    >
      <div style="padding: 10px">
        <el-row :gutter="20">
          <el-col :span="16">
            <img
              :src="currentSpot.image"
              alt=""
              style="width: 100%;height: 100%"
            >
          </el-col>
          <el-col :span="8">
            <div style="padding: 0 15px">
              <div style="font-size: 24px;margin-top: 0">{{currentSpot.name}}
              </div>
              <div>
                <i
                  style="margin-right: 5px;margin-top: 10px"
                  class="el-icon-location"
                ></i>
                <span>{{currentSpot.location}}</span>
              </div>
              <div style="margin: 20px 0;color: #666;line-height: 1.6">
                <p>{{currentSpot.description}}</p>
              </div>
              <div>
                <div style="margin: 20px 0;color: #666;font-size: 18px">开放时间
                </div>
                <p>{{currentSpot.openingHours}}</p>
              </div>
              <div>
                <div style="margin: 20px 0;color: #666;font-size: 18px">附近酒店
                </div>
                <div style="margin-top: 10px;">
                  <div
                    class="homestay-item"
                    v-for="(homestay,homestayId) in nearByHomestays"
                    :key="homestayId"
                    @click="goToDetail(homestay.homestayId)"
                  >
                    <img
                      :src="homestay.image"
                      alt=""
                    >
                    <div style="flex: 1;">
                      <p>{{homestay.location}}</p>
                      <p style="color: #d6610f;font-weight: bold">
                        ￥{{homestay.price}}起</p>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 酒店详情 -->
        <RoomReservation ref="roomReservation" />
      </div>
    </vxe-modal>

  </div>
</template>



<script>
import { selectSpotsOrTagList } from "@/api/huacai/spots";
import { selectHomestayBySpotsId } from "@/api/huacai/homestay";
import RoomReservation from "@/views/components/RoomReservation/index.vue";

export default {
  name: "scenicSpots",
  components: { RoomReservation },
  //特色景点页面
  data () {
    return {
      // 初始化列表
      spots: [], //景点列表
      currentSpot: [],//景点详情数据
      detailVisible: false,//景点详情是否打开：默认不打开
      nearByHomestays: [],//附近酒店列表
      querySpots: {
        name: '',//景点名称
        city: '',//城市
        location: ''//地址
      }
    }
  },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      selectSpotsOrTagList(this.querySpots).then(res => {
        this.spots = res.data
        this.spots.forEach(item => {
          item.image = process.env.VUE_APP_BASE_API + item.image;
        })
      })
    },
    //打开景点详情页
    viewDetail (spotsId) {
      this.currentSpot = this.spots.find(spot => spot.spotsId === spotsId)
      selectHomestayBySpotsId(spotsId).then(res => {
        // console.log(res,'ww')
        this.nearByHomestays = res.data
        this.nearByHomestays.forEach(item => {
          item.image = process.env.VUE_APP_BASE_API + item.image;
        })
        this.detailVisible = true;
      })
    },
    //打开酒店详情
    goToDetail (homestayId) {
      this.$refs.roomReservation.handleOpen(homestayId, '酒店ID');
      // console.log(homestayId,'酒店ID')
    },
    // 查询
    handleQuery () {
      this.getList();
    },
    // 重置查询
    resetQuery () {
      this.querySpots = {
        name: '',
        city: '',
        location: ''
      };
      this.getList();
    }
  }
}
</script>
<style scoped lang="scss">
.query-form {
  display: flex;
  justify-content: space-between;
}
.spot-card {
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  transition: transfrom 0.3s;
}
.spot-card:hover {
  transform: translateY(-5px);
}
.spot-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.location {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.brief {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  //景点描述只显示一行
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tags {
  margin-bottom: 10px;
}
.tags .el-tag {
  margin-right: 5px;
}
.homestay-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.homestay-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  margin-right: 10px;
}
</style>
